<template>
  <div class="index_body">
      <div :style="{height:getWindowHeight+'px'}">
            <cube-scroll
              ref="scrolls"
              :data="arrBusiness"
              :options="options"
              @pulling-up="onPullingUp"
              >
              <router-link tag="div"
                :to="{ path: 'businessdetails', query: {poster_id:list.id} }"
                class="box" v-for="(list,index) in arrBusiness"
                :key="list.id">
                  <p class="shop_name">一&nbsp;&nbsp;{{list.store_name}}&nbsp;&nbsp;一</p>
                  <h3 class="title">{{list.title}}</h3>
                  <p class="zuozhe">文/{{list.author}}</p>
                  <div class="img_box">
                      <img :src="list.ad_images" alt="">
                  </div>
                  <div class="info_p">
                      <p>{{list.abstract}}</p>
                  </div>
                  <div class="foot">
                      <div class="riqi">
                          {{list.created_at*1000 | formatDate}}
                      </div>
                      <div class="right">
                          <div class="item">
                              <i class="xiugai_icon" :style="xiugai_icon"></i>
                              <span class="num" v-if="list.comment_num">{{list.comment_num}}</span>
                          </div>
                          <div class="item">
                                <i class="icon_share" :style="icon_share"></i>
                                <span class="num" v-if="list.collection_num">{{list.collection_num}}</span>
                          </div>
                          <div class="item">
                                <i class="icon_good" :style="icon_good"></i>
                                <span class="num" v-if="list.praise_num">{{list.praise_num}}</span>
                          </div>
                      </div>
                  </div>
              </router-link>
              <p v-if="arrBusiness.length == 0" style="margin-top:1rem;color:ffffff;">没有更多数据了</p>
          </cube-scroll>
      </div>
      <div ref="bottom_h" id="dy_foot" class="" style="height:1.96rem;position: fixed;bottom: 0;left: 0;">

        </div>
      <tabbar v-show="$route.meta.navShow" :idx="2"></tabbar>
  </div>
</template>
<script>
import {formatDate} from '@/util/date.js';
import tabbar from '@/components/Tabbar'
export default {
    filters: {
        formatDate(time) {
            var date = new Date(time);
            return formatDate(date, 'yyyy-MM-dd hh:mm');
        }
    },
    data(){
        return{
            xiugai_icon:{
                backgroundImage: "url(" + require("../../assets/icon_word@2x.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "cover"
            },
            icon_share:{
                backgroundImage: "url(" + require("../../assets/icon_share@2x.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "cover"
            },
            icon_good:{
                backgroundImage: "url(" + require("../../assets/icon_good@2x.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "cover"
            },
            arrBusiness:[],
            page:1,
            pullUpLoad: true,
            pullUpLoadThreshold: 0,
            pullUpLoadMoreTxt: '',//上拉加载更多
            pullUpLoadNoMoreTxt: '没有更多数据了喔~',
            getWindowHeight:null,
        }
    },
    methods:{
        getBusiness:function(){
            let that = this;
            that.$axios.post("/fang/tool/get_poster_list?page="+that.page)
                .then(function (response) {
                    let res = response.data;
                    if(res.status == 1){
                        console.log(res,"攻略")
                        if(res.data.data.length > 0){
                            console.log("攻略1")
                            that.arrBusiness = that.arrBusiness.concat(res.data.data);
                            that.page = parseInt(res.data.current_page) +1;
                        }else{
                            console.log("攻略2")
                            // 如果没有新数据
                            that.$refs.scrolls.forceUpdate();
                        }
                    }else{
                        console.log("出错了")
                    }
                })
                .catch(function (error) {
                  console.log(error);
            });
        },
        onPullingUp:function(){
          this.getBusiness();
        }

   },
   mounted(){
       document.getElementsByTagName("body")[0].className="business_active_bg";
       this.getWindowHeight = (document.documentElement.clientHeight || document.body.clientHeight) - this.$refs.bottom_h.offsetHeight;
   },
   metaInfo: {
     title: "攻略"
    },
    components:{
        tabbar
    },
   computed: {
       options() {
         return {
           pullUpLoad: this.pullUpLoadObj,
           scrollbar: true
         }
     },
     pullUpLoadObj: function() {
       return this.pullUpLoad  ? {
         threshold: parseInt(this.pullUpLoadThreshold),
         txt: {
           more: this.pullUpLoadMoreTxt,
           noMore: this.pullUpLoadNoMoreTxt
         }
       } : false;
     }
   },
   beforeCreate:function(){
       let that = this;
       document.getElementsByTagName("body")[0].className="business_active_bg";
   },
   activated:function(){
       //使用keep-alive以后进入页面只会触发activated
       document.getElementsByTagName("body")[0].className="business_active_bg";
       this.page = 1;
       this.arrBusiness = [];
       this.getBusiness();
   },
   beforeDestroy: function() {
       document.body.removeAttribute("class","business_active_bg");
   },
   deactivated:function(){
       //deactivated使用keep-alive以后推出页面只会触发deactivated
       document.body.removeAttribute("class","business_active_bg");
   }
}
</script>
<style scoped>
.index_body{
    height: 100%;
}
.box{
    background: #ffffff;
    padding:0 .8rem;
    overflow: hidden;
    margin-bottom: .2rem;
}
.box .shop_name{
    margin: .5rem 0 .86rem 0;
    text-align: center;
    font-size: .4rem;
    color: #9b9b9b;
}
.box .title{
    margin: 0 0 .82rem 0;
    text-align: left;
    font-size: .8rem;
    color: #353535;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.box .zuozhe{
    margin: 0 0 .46rem 0;
    text-align: left;
    font-size: .56rem;
    color: #6f6f6f;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.box .img_box{
    width: 13.4rem;
    height: 8rem;
    text-align:center;
      display: table-cell;
      vertical-align: middle;
}
.box .img_box img{
    max-width: 100%;
    max-height: 8rem;
    vertical-align: middle;
}
.box .info_p{
    margin: .54rem 0 1.08rem 0;
    font-size: .56rem;
    color: #4e4e4e;
    text-align: left;
    line-height: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.box .foot{
    width: 100%;
    height: 1.56rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.box .foot .riqi{
    font-size: .4rem;
    color: #979797;
    text-align: left;
}
.box .foot .right .item{
    margin: 0 .66rem;
    display: inline-block;
    position: relative;
}
.box .foot .right .item .xiugai_icon{
    display: block;
    width: .56rem;
    height: .56rem;
}
.box .foot .right .item .icon_share{
    display: block;
    width: .6rem;
    height: .56rem;
}
.box .foot .right .item .icon_good{
    display: block;
    width: .56rem;
    height: .56rem;
}
.box .foot .right .item .num{
    font-size: .4rem;
    color: #979797;
    position: absolute;
    right: -.5rem;
    top: -.4rem;
}
</style>
